 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <style>
    .red{
        color:red;
    }
    .green{
        color:green;
    }
    .fnSize{
        font-size: 14px;
    }
    </style>
</head>
<body>
    <div id="app">
        <h2>h2默认样式样式</h2>
        <h2 v-bind:class="{red: isRed, fnSize: size }">v-bind绑定class 对象语法</h2>

        <h2 v-bind:class="[activeClass, fnClass]">v-bind绑定class 数组语法</h2>

        <h2 v-bind:class="[size ? fnClass : '', activeClass]">绿色始终存在，字体大小随bool变</h2>

        <h2 v-bind:style="{ }">v-bind绑定style 对象语法</h2>
        <!-- <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> -->
        <h2 v-bind:style="[styleObj1, styleObj2]">v-bind绑定style 数组语法</h2>
    </div>
    <script>
     new Vue({
         el: "#app",
         data: {
             isRed: true,
             size: true,
             activeClass: 'green',
             fnClass: 'fnSize',
             styleObj1: {
                color: "red", 
                fontSize: '25px'
             },
             styleObj2: {
                backgroundColor: "blue"
             }
         },
         
     });
    </script>
</body>
</html>
